<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" xmlns:c="http://java.sun.com/jsp/jstl/core"
	template="template/ui.xhtml">

	<ui:define name="metadata">
		<!-- <f:viewParam name="userLang" value="#{cardSearchCtrl.user.langCode}" />
			<f:viewAction action="#{cardSearchCtrl.initialize}" /> -->
	</ui:define>

	<ui:define name="content">
		<p:panel id="searchBox" toggleable="true" header="#{msgs.filters}" styleClass="no-border">
			<h:form>
				<p:selectManyCheckbox value="#{cardSearchCtrl.selectedSpheres}" layout="grid" columns="3">
					<f:selectItems value="#{cardSearchCtrl.sphereItems}" />
				</p:selectManyCheckbox>

				<p:autoComplete value="#{cardSearchCtrl.selectedCardSets}"
					completeMethod="#{cardSearchCtrl.completeCardSet}" var="item" itemLabel="#{item.name}"
					itemValue="#{item}" converter="cardSet" maxResults="20" scrollHeight="300" multiple="true">

					<p:column style="border: none;">
						<h:outputText value="#{item.name}" escape="false" />
						<br />
						<h:outputText value="#{msgs.cycle}: #{item.cycleName}" style="font-size: 10px;" escape="false" />
					</p:column>
				</p:autoComplete>

				<p:autoComplete value="#{cardSearchCtrl.selectedEncounterSets}"
					completeMethod="#{cardSearchCtrl.completeEncounterSet}" var="item" itemLabel="#{item.name}"
					itemValue="#{item}" converter="autoCompleteItemConverter" maxResults="20" scrollHeight="300" multiple="true">

					<p:column style="border: none;">
						<h:graphicImage url="#{commonCtrl.encounterSetImagePath}#{item.techName}.png"
							style="float: right; width: 40px; height: 40px;" />
						<h:outputText value="#{item.name}" escape="false" />
						<br />
						<h:outputText
							value="#{msgs.exp_or_adv_pack}: #{item.crstName}, #{msgs.cycle}: #{item.cycleName}"
							style="font-size: 10px;" escape="false" />
					</p:column>
				</p:autoComplete>
			</h:form>
		</p:panel>
		<h:panelGroup id="searchResults" display="block">
		</h:panelGroup>
	</ui:define>

</ui:composition>